<!-- 首页组件 -->
<template>
  <div class="home">
    <!-- <transition name="back"> -->
    <HomeHeader></HomeHeader>
    <div class="ly-tab-wrap">
      <div class="classifys">
        <div class="navlist">
          <ul @touchstart="moveStart()" @touchend="moveEnd()">
            <li
              :class="{
                iconfont: flag == index,
                'icon-curve1': flag == index,
              }"
              v-for="(item, index) in lytabs"
              :key="index"
              v-text="item.label"
              @click="changelytab(item, index)"
            ></li>
          </ul>
        </div>
        <div class="tab-right">
          <i class="iconfont icon-listsmall"></i>
          <span>分类</span>
        </div>
      </div>
    </div>
    <!-- 首页子路由占位符 -->
    <div class="aside">
      <Aside></Aside>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
    <!-- </transition> -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import HomeHeader from "./components/Homeheader"; //.vue后缀名可以省掉
import Aside from "./components/Aside";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    HomeHeader,
    Aside,
  },
  data() {
    //这里存放数据
    return {
      flag: 0,
      page: 1,
      size: 10,
    };
  },
  //监听属性 类似于data概念
  computed: {
    lytabs() {
      let datas = this.$store.state.categorylistData;
      let items = [
        {
          label: "首页",
          path: "index",
        },
      ];
      datas.forEach((item) => {
        items.push({
          label: item.cat_name,
          cat_id: item.cat_id,
          path: "other?cat_id=" + item.cat_id,
        });
      });
      return items;
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    moveStart() {
      if (event.targetTouches.length == 1 && event.cancelable) {
        // event.preventDefault(); // 阻止浏览器默认事件，重要
        let touch = event.targetTouches[0].pageX;
        let oleft = getComputedStyle(event.target.parentNode).left;
        event.target.parentNode.addEventListener("touchmove", function () {
          //   event.preventDefault(); // 阻止浏览器默认事件，重要
          let move = event.targetTouches[0].pageX;
          event.target.parentNode.style.left =
            oleft.slice(0, -2) - touch + move + "px";
        });
      }
    },
    moveEnd() {
      let node = event.target.parentNode;
      if (getComputedStyle(node).left.slice(0, -2) > 0) {
        let x = node.style.left.slice(0, -2) * 0.02;
        let time = setInterval(() => {
          let left = node.style.left.slice(0, -2);
          node.style.left = left - x + "px";
          if (left < 5) {
            node.style.left = "0px";
            clearInterval(time);
          }
        });
      } else if (
        getComputedStyle(node).left.slice(0, -2) <
        -(node.offsetWidth - node.parentNode.offsetWidth)
      ) {
        let x =
          (Number(node.style.left.slice(0, -2)) +
            Number(node.offsetWidth - node.parentNode.offsetWidth)) *
          0.02;
        let time = setInterval(() => {
          let left = node.style.left.slice(0, -2);
          node.style.left = left - x + "px";
          if (left > -(node.offsetWidth - node.parentNode.offsetWidth)) {
            node.style.left =
              -(node.offsetWidth - node.parentNode.offsetWidth) + "px";
            clearInterval(time);
          }
        });
      }
    },
    changelytab(item, index) {
      this.page = 1;
      this.flag = index;
      this.$router.replace(item.path);
      this.$store.dispatch("ActchangecategoryData", { cat_id: item.cat_id });
      this.$store.dispatch("Actchangecategorylist", {
        cat_id: item.cat_id,
        page: this.page,
        size: this.size,
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.$store.dispatch("ActchangecategorylistData");
    });
    this.$store.dispatch("ActchangecategoryData");
  },
};
</script>
<style lang="less">
.ly-tab-wrap {
  width: 100%;
  max-width: 640px;
  z-index: 99;
  position: fixed;
  top: 4.4rem;
  .classifys {
    color: #fff;
    line-height: 35px;
    font-weight: 600;
    padding: 0 10px 5px;
    box-sizing: border-box;
    display: flex;
    .navlist {
      width: 84%;
      height: 4.1rem;
      position: relative;
      overflow: hidden;

      ul {
        list-style: none;
        overflow: hidden;
        height: 4.1rem;
        display: flex;
        white-space: nowrap;
        position: absolute;
        left: 0px;

        li {
          padding: 0.5rem;
          color: #fff;
          font-size: 1.4rem;
          display: flex;
          align-items: center;
        }

        .iconfont {
          position: relative;
          font-weight: 600;

          &:before {
            position: absolute;
            top: 1.4rem;
            font-size: 1.2rem;
            right: 50%;
            margin-right: -0.6rem;
            z-index: 1;
          }
        }
      }
    }
    .tab-right {
      display: flex;
      align-items: center;
      justify-content: center;
      .icon-listsmall {
        box-shadow: -6px 0 4px -4px rgba(0, 0, 0, 0.4);
        font-size: 1.6rem;
        font-weight: 500;
        padding-left: 0.5rem;
      }
      span {
        font-size: 1.4rem;
        padding-left: 0.5rem;
      }
    }
  }
}
.container {
  height: 20rem;
  position: relative;
  width: 94%;
  margin-top: 10px;
  margin-left: 3%;
  border-radius: 15px 15px 0 0;
  background: #fff;
}
.depreciate {
  width: 100%;
  .img {
    padding: 12px 12px 0;

    img {
      width: 100%;
    }
  }
}
</style>
